<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title id="shop_title"></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<!-- build:css /css/main.css -->
		<link href="/css/mui.css" rel="stylesheet" />
		<link href="/css/iconfont.css" rel="stylesheet" />
		<link href="/css/common.css" rel="stylesheet" />
		<!-- endbuild -->
		<style type="text/css">
			.mui-bar-nav~ .mui-content {
				padding-top: 0px;
			}

			.u-nav {
				background: rgba(255, 80, 0, 0);
			}
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav u-nav">
			<a style="float: left; line-height: 44px;" id="shop_name">umost</a>
			<a id="info" data-url="/user/user.html" data-id="user.html" class="mui-icon mui-icon-contact mui-pull-right"></a>
			<div class="mui-input-row" style="margin-left: 4em; width: 65%; position: absolute;">
				<span class="mui-icon mui-icon-search" style="position: absolute; top: 0px; left: 5px; font-size: 22px;color: #ccc;"></span>
				<input id="search" type="search" class="mui-input-clear" style=" background: #fff; " placeholder="请输入宝贝名"></div>

		</header>

		<nav class="mui-bar mui-bar-tab" id="fnav">
			<a class="mui-tab-item mui-active" data-id="index.html" data-url="/index.html">
				<span class="mui-icon iconfont icon-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" data-id="category.html" data-url="/category.html">
				<span class="mui-icon iconfont icon-fenlei"></span>
				<span class="mui-tab-label">分类</span>
			</a>
			<a class="mui-tab-item" data-id="search.html" data-url="/search.html">
				<span class="mui-icon iconfont icon-fenleisousuo-home"></span>
				<span class="mui-tab-label">搜索</span>
			</a>
			<a class="mui-tab-item" data-id="cart.html" data-url="/cart.html">
				<span class="mui-icon iconfont icon-gouwuche1"></span>
				<span class="mui-tab-label">购物车</span>
			</a>
			<a class="mui-tab-item" data-id="user.html" data-url="/user/user.html">
				<span class="mui-icon iconfont icon-gerenzhongxin"></span>
				<span class="mui-tab-label">我</span>
			</a>
		</nav>

		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll" id="mui-scroll">

				<div id="slider" class="mui-slider">
					<div class="mui-slider-group mui-slider-loop" id="sliderLoops">
						<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
						<!--<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#">
						<img src="img/yuantiao.jpg"></a>
				</div>
				-->
						<!-- 第一张 -->
						<!--<div class="mui-slider-item">
				<a href="#">
					<img src="img/shuijiao.jpg"></a>
			</div>
			-->
						<!-- 第二张 -->
						<!--<div class="mui-slider-item">
			<a href="#">
				<img src="img/muwu.jpg"></a>
		</div>
		-->
						<!-- 第三张 -->
						<!--<div class="mui-slider-item">
		<a href="#">
			<img src="img/cbd.jpg"></a>
	</div>
	-->
						<!-- 第四张 -->
						<!--<div class="mui-slider-item">
	<a href="#">
		<img src="img/yuantiao.jpg"></a>
</div>
-->
						<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
						<!--<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
	<img src="img/shuijiao.jpg"></a>
</div>
-->
					</div>
					<div class="mui-slider-indicator" id="sliderLoopActives">
						<div class="mui-indicator mui-active"></div>
						<!--<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
-->
					</div>
				</div>

				<!-- 热门产品  -->
				<div class="product">
					<div class="product_list">
						<div class="title clear">
							<span class="fl">
<span class="mr8">
	/ <b>热门产品</b>
	/
</span> 人人都在抢的货
							</span>
							<span class="fr" id="changeGoods">
不喜欢? <i class="button" id="aaaa" >换一组</i>
</span>
						</div>

						<div class="product_detail overf">
							<div class="fl">
								<div id="secKill_a0" class="fldd">
									<!-- <a href="goods.html">
	<dl class="clear">
		<dt>
			<p>
				<img src="http://api.ikjtao.com/product/KD000217/20160705_113059_791.jpg"></p>
		</dt>
		<dd>
			<p class="texttitle txt">花王婴儿纸尿裤(尺寸M64)</p>
			<p class="textvalue">
				<span>￥867.80</span> <em>￥1128.14</em>
			</p>
		</dd>
	</dl>
</a>
-->
								</div>
							</div>
							<div class="fr">
								<div id="secKill_a1" class="over">
									<!-- <a href="goods.html">
<dl class="clear">
	<dt>
		<p>
			<img src="http://api.ikjtao.com/product/KD000217/20160705_113059_791.jpg"></p>
	</dt>
	<dd>
		<p class="texttitle txt">BRITA滤芯(5+1)只装</p>
		<p class="textvalue">
			<span>￥189.00</span> <em>￥245.70</em>
		</p>
	</dd>
</dl>
</a>
-->
								</div>
								<div id="secKill_a2">
									<!-- <a href="goods.html">
<dl class="clear">
<dt>
	<p>
		<img src="http://api.ikjtao.com/product/KD000217/20160705_113059_791.jpg"></p>
</dt>
<dd>
	<p class="texttitle txt">韩国HUGGIES好奇婴儿纸尿裤3段（GIRL 适用体重：7-11kg）72片</p>
	<p class="textvalue">
		<span>￥600.00</span>
		<em>￥780.00</em>
	</p>
</dd>
</dl>
</a>
-->
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 食品饮料 -->
				<div class="swiper-container swiper-container-horizontal" style="cursor: -webkit-grab;">

					<div class="swiper-scrollbar" style="opacity: 0; transition-duration: 400ms;">
						<div class="swiper-scrollbar-drag" style="transform: translate3d(0px, 0px, 0px); transition-duration: 0ms; width: 199.273px;"></div>
					</div>
				</div>

				<div class="gray-text">
					<span class="gray-layout">
<span class="gray-text-img"></span> 为您推荐
					</span>
				</div>

				<div class="love-content" id="love-content">

					<!--<div class="love-item">
<a href="goods.html">
<img src="http://www.umost.cn/images/201608/thumb_img/160722_thumb_G_14707309433482.jpg">
<p class="line-num1 ng-binding">西班牙杏仁蜂蜜身体保湿润肤乳500ml</p>
</a>
<div class="love-price">
<span>价格:</span> <i class="ng-binding">95.5</i> <del>105.5</del>
</div>
</div>

<div class="love-item">
<a href="goods.html">
<img src="http://www.umost.cn/images/201608/thumb_img/160722_thumb_G_14707309433482.jpg">
<p class="line-num1 ng-binding">西班牙杏仁蜂蜜身体保湿润肤乳500ml</p>
</a>
<div class="love-price">
<span>价格:</span>
<i class="ng-binding">95.5</i> <del>105.5</del>
</div>
</div>
-->
				</div>

			</div>
		</div>
		<!-- build:js /js/vendor.js -->
		<script src="/js/mui.min.js"></script>
		<!-- bower:js -->
		<script src="/bower_components/mockjs/dist/mock.js"></script>
		<script src="/bower_components/zepto/zepto.js"></script>
		<script src="/bower_components/Zepto-Cookie/zepto.cookie.js"></script>
		<!--  endbower -->
		<!-- endbuild -->
		<!-- build:js /js/main.js -->
		<script src="/js/common.js"></script>
		<script src="/js/app.js"></script>
		<!-- endbuild -->
		<script type="text/javascript">
			$(document).on("scroll", function() {

				var getTranslateY = function(node) {
					var regRule = /translate(Y|\dd)?\(\s*(\w+\s*,)?\s*([^,]+)(\s*,[^)]+)?\s*\)/;
					var regRule2 = /matrix\(.*,\s*(\w+)\s*\)/;
					var transform = node.style.transform;
					var reg;
					if(!transform) {
						return null;
					}
					reg = regRule.exec(transform);
					if(null === reg) {
						reg = regRule2.exec(transform);
						return reg ? reg[1] : null;
					}
					return reg[3];
				}

				var pNodes = document.getElementById('mui-scroll');
				var sctop = getTranslateY(pNodes).replace(/[^0-9]+/g, '') / 200;
				// var sctop = getTranslateY(pNodes);

				if(sctop == 0) {
					$('.u-nav').css('background', 'rgba(255,80, 0 ,0)');
				} else if(sctop >= 0.9) {
					$('.u-nav').css('background', 'rgba(255,80, 0 ,0.9)');
				} else {
					$('.u-nav').css('background', 'rgba(255,80, 0 , 0.5)');
				}
			})

			var page = 1;
			var page2 = 1;
			mui.init({
				swipeBack: true, //启用右滑关闭功能
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						contentrefresh: '正在加载...',
						callback: getHotGoods
					}
				}
			});

			var slider = mui("#slider");
			var count = 0;
			/** 上拉加载为你推荐  **/
			function getHotGoods() {
				var flag = false;
				$.ajax({
					url: __BATE__ + 'api/recommendProduct',
					data: {
						page: page,
						code: codeVal
					},
					type: 'get',
					dataType: "json",
					success: function(json) {

						var data = json.ret_data;
						console.log(data);
						if(page <= data.PageAll) {
							if(page == 1) {
								$("#love-content").html();
							}
							++page;

							var htmls = '';
							for(var i = 0; i < data.data.length; i++) {
								htmls = htmls + '<div class="love-item">' +
									'<a goods-id="' + data.data[i].product_id + '">' +
									'<img src="' + data.data[i].img + '"><p class="line-num1 ng-binding">' + data.data[i].content + '</p></a>' +
									'<div class="love-price">' +
									'<span>价格:</span>' +
									'<i class="ng-binding">￥' + data.data[i].shop_price + '</i>' +
									'</div>' +
									'</div>';
							}
							var oldHtml = $("#love-content").html();
							$("#love-content").html(oldHtml + htmls);
              var wd = $('.love-item img').css('width');
              $('.love-item img').css('height', wd);

						} else {
							flag = true;
						}

						try {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(flag);
						} catch(e) {}

					},
					error: function(xhr, type, errorThrown) {
						serverErr();
						try {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(flag);
						} catch(e) {}
					}

				})
			}

			/*轮播*/
			$.ajax({
				url: __BATE__ + 'api/indexData',
				data: {
					code: codeVal
				},
				success: function(json) {
					var asd = 'upload/';
					var data = json.ret_data;
					var imgHtml = '';
					var ballHtml = '<div class="mui-indicator mui-active"></div>';
					var img = data.imgUrls;
					for(var i = 0; i < img.length; i++) {
						imgHtml += '<div class="mui-slider-item"><img class="showEvent" src="'+img[i] + '" /></div>';
						if(i > 0) {
							ballHtml += '<div class="mui-indicator"></div>';
						}
					}
					var k = img.length - 1;
					var imgHtmlStart = '<div class="mui-slider-item mui-slider-item-duplicate"><img class="showEvent" src="' + img[k] + '" /></div>';
					imgHtml = imgHtmlStart + imgHtml;
					imgHtmlEnd = '<div class="mui-slider-item mui-slider-item-duplicate"><img class="showEvent" src="' + img[0] + '" /></div>';
					imgHtml += imgHtmlEnd
					$('#sliderLoops').html(imgHtml);
					$('#sliderLoopActives').html(ballHtml);
					mui('.mui-slider').slider({
						interval: 3000
					});
					$('#shop_name').html(data.shop_name)

				}
			});

			/*换一组*/
			function secKill() {
				var flag = false;
				$.ajax({
						url: __BATE__ + 'api/hotSaleProduct',
						data: {
							page: page2,
							code: codeVal
						},
						success: function(json) {
							var data = json.ret_data;
							console.log(data)
							if(page2 <= data.PageAll) {
								++page2;
								for(var i = 0; i < data.data.length; i++) {
									var text = '<a  goods-id="' + data.data[i].product_id + '">' +
										'<dl class="clear">' +
										'<dt><p><img src="' + data.data[i].img + '"></p></dt>' +
										'<dd>' +
										'<p class="texttitle txt">' + data.data[i].content + '</p>' +
										'<p class="textvalue"><span>￥' + data.data[i].shop_price + '</span></p>' +
										'</dd>' +
										'</dl>' +
										'</a>';
									$('#secKill_a' + i + '').html(text);
								}
							} else {
								page2 = 1;
							}
						}
					}
				)
			}
			secKill();
			mui('body').on('touchend', '#aaaa', function() {
				secKill()
			})
mui('body').on('tap', '.product_detail a, .love-item a', function() {
						mui.openWindow({
							url: '/goods.html?goodsId='+$(this).attr('goods-id'),
							id: 'goods.html'
						})
					});
			mui.ready(function() {
				mui('#pullrefresh').pullRefresh().pullupLoading();
			});
		</script>
	</body>
</html>
